Skip to content

[#491] Fix mobile footer layout and bottom nav spacing#495

Merged
realproject7 merged 1 commit intomainfrom
task/491-mobile-footer
Mar 24, 2026
Merged

[#491] Fix mobile footer layout and bottom nav spacing#495
realproject7 merged 1 commit intomainfrom
task/491-mobile-footer

Conversation

@realproject7
Copy link
Copy Markdown
Owner

Summary

  • Footer: Adds pb-20 on mobile for clearance above the fixed bottom nav bar (reverts to pb-6 on desktop via lg:pb-6). Stacks footer elements vertically on small screens (flex-colsm:flex-row) for better mobile layout.
  • MobileActionBar: Adds env(safe-area-inset-bottom) padding to the fixed bottom bar so buttons don't overlap the home indicator on notched devices (iPhone X+, etc.).

Fixes #491

Test plan

  • Build passes (next build)
  • Footer has visible gap above bottom nav on mobile
  • Footer elements stack cleanly on narrow viewports
  • Bottom nav buttons have comfortable tap targets on notched devices
  • Desktop layout unchanged

🤖 Generated with Claude Code

- Footer: add pb-20 on mobile for clearance above fixed bottom nav,
  stack layout vertically on small screens, pb-6 on desktop
- MobileActionBar: add safe-area-inset-bottom padding so buttons
  don't overlap the home indicator on notched devices

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented Mar 24, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
plotlink Ignored Ignored Mar 24, 2026 11:22am

Request Review

Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Minimal and correct. Footer gets pb-20 on mobile (clears bottom nav) with lg:pb-6 desktop reset. Vertical stacking on small screens with sm: breakpoint for horizontal layout. Bottom nav uses env(safe-area-inset-bottom) via calc() for notched devices. No issues.

Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verdict: APPROVE

Summary

The footer now stacks cleanly on narrow screens and has explicit mobile clearance above the fixed action bar. The bottom nav also adds safe-area-aware bottom padding for notched devices.

Findings

  • None.

Decision

Approve because the changes are focused and satisfy #491's mobile layout and spacing requirements.

@realproject7 realproject7 merged commit 78d7ec8 into main Mar 24, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fix mobile footer layout — broken styling and too close to bottom nav

2 participants